<template>
  <div id="vipInfo">
    <h1>会员管理</h1>
    <el-tabs v-model="activeName" @tab-click="handleClick" stretch>
      <el-tab-pane label="充值服务" name="recharge" >
        <Recharge></Recharge>
      </el-tab-pane>
      <el-tab-pane label="注册VIP" name="addvip">
<!--        <addvip></addvip>-->
        <component :is="lazyVue"></component>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
  import Recharge from './Recharge'
  // import AddVIP from './AddVIP';
  // 异步引入组件
  const lazyAddVip = resolve => require(['./AddVIP'], resolve)
  export default {
    name: "VIPInfo",
    components: {
      Recharge,
      // addvip: AddVIP,
    },
    data () {
      return {
        activeName:'recharge',
        lazyVue: '',
      }
    },
    methods: {
      handleClick(vueInstance) {
        console.log('handleClick()',vueInstance.name)
        switch (vueInstance.name) {
          case 'recharge':
            this.lazyVue = Recharge
            break;
          case 'addvip':
            this.lazyVue = lazyAddVip
            break
        }
      }
    },
    created() {
      console.log ()
      
    }
  }
</script>

<style lang="less" scoped>
  #vipInfo {
    h1 {
      color: #909399;
      text-align: center;
    }
  }
</style>